<template>
    <view class="bg-[var(--page-bg-color)] min-h-[100vh] w-full" :style="themeColor()" v-if="memberStore.info">
        <view class="fixed w-full z-2 !bg-[var(--page-bg-color)]">
            <view class="pb-[272rpx]" :style="headerStyle">
                <!-- #ifdef MP-WEIXIN || APP-PLUS -->
                <top-tabbar :data="param" class="top-header" />
                <!-- #endif -->
            </view>
            <view class="mt-[-232rpx] sidebar-margin rounded-[var(--rounded-big)]"
                  :style="{ backgroundImage: 'url(' + img('static/resource/images/member/commission/account_bg.png') + ')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}">
                <view class="pt-[40rpx]">
                    <view class="flex items-center justify-between px-[30rpx]">
                        <view>
                            <view class="text-[26rpx] font-400 text-[#fff] mb-[20rpx]">{{ t('accountCommission') }}</view>
                            <view class="font-bold text-[56rpx] price-font text-[#fff] flex items-baseline">{{ memberStore.info ? moneyFormat(memberStore.info.commission) : '0.00' }}</view>
                        </view>
                        <button @click="applyCashOut" hover-class="none" class="bg-[#fff] rounded-[100rpx] w-[160rpx] h-[70rpx] flex-center text-[#EF000C] m-[0] border-[0] text-[26rpx]">{{ t('transferMoney') }}</button>
                    </view>
                    <view class="flex items-center mt-[60rpx] px-[30rpx] pb-[10rpx] border-[0] border-t-[2rpx] border-solid border-[rgba(255,255,255,.1)] h-[126rpx]">
                        <view class="flex-1">
                            <view class="font-bold text-[#fff] text-[40rpx] mb-[10rpx] price-font">{{ moneyFormat(memberStore.info?.commission_get) || '0.00' }}</view>
                            <view class="text-[24rpx] text-[#fff]">{{ t('commission') }}</view>
                        </view>
                        <view class="flex-1">
                            <view class="font-bold text-[#fff] text-[40rpx] mb-[10rpx] price-font">{{ moneyFormat(memberStore.info?.commission_cash_outing) || '0.00' }}</view>
                            <view class="text-[24rpx] text-[#fff]">{{ t('money') }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="mt-[30rpx] tab-style-1">
                <view class="tab-left">
                    <view class="tab-left-item"
                          :class="{ 'class-select': fromType.from_type === item.from_type && fromType.account_data_gt === item.account_data_gt }"
                          @click="fromTypeFn(item,index)" v-for="(item, index) in accountTypeList">{{ item.name }}</view>
                </view>
                <view class="tab-right" @click="handleSelect">
                    <view class="tab-right-date">日期</view>
                    <view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
                </view>
            </view>
        </view>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" :up="{ empty: { use: true } }" @up="geCommissionListFn" :top="mescrollTop">
            <view class="px-[var(--sidebar-m)] pt-[10rpx] body-bottom" v-if="list.length">
                <view v-for="(item,index) in list" :key="item.id"
                      class="w-full h-[140rpx] flex justify-between items-center card-template"
                      :class="{'mt-[var(--top-m)]':index}">
                    <view class="flex items-center">
                        <view class="w-[80rpx] h-[80rpx] rounded-[40rpx] text-[40rpx] font-500  text-[#fff] flex items-center justify-center"
                            :class="{'bg-[#EF000C]' :item.account_data > 0, 'bg-[#1379FF]':item.account_data <= 0 }">{{ item.account_data > 0 ? '收' : '提' }}</view>
                        <view class="flex flex-col ml-[20rpx]">
                            <view class="text-[#333] text-[28rpx] leading-[36rpx]">{{ item.from_type_name }}</view>
                            <view class="text-[var(--text-color-light9)] text-[24rpx] mt-[12rpx]">{{ item.create_time }}</view>
                        </view>
                    </view>
                    <view class="text-[36rpx] leading-[50rpx] price-font"
                          :class="{'text-[#EF000C]' :item.account_data > 0, 'text-[#1379FF]':item.account_data <= 0 }">{{ item.account_data > 0 ? '+' + item.account_data : item.account_data }}</view>
                </view>
            </view>
        </mescroll-body>
        <loading-page :loading="loading"></loading-page>
        <!-- 时间选择 -->
        <select-date ref="selectDateRef" @confirm="confirmFn" />
    </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { t } from '@/locale'
import { moneyFormat, redirect, img } from '@/utils/common';
import useMemberStore from '@/stores/member'
import { getCommissionList } from '@/app/api/member';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import { topTabar } from '@/utils/topTabbar'
import selectDate from '@/components/select-date/select-date.vue';

const { downCallback, mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const memberStore = useMemberStore();
const info = computed(() => memberStore.info)
// 提现
const applyCashOut = () => {
    uni.setStorageSync('cashOutAccountType', 'commission')
    redirect({ url: '/app/pages/member/apply_cash_out' })
}

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({ title: '我的佣金', topStatusBar: { bgColor: '#fff', textColor: '#333' } })
/********* 自定义头部 - end ***********/

    // 获取系统状态栏的高度
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const headerStyle = computed(() => {
    return {
        backgroundImage: 'url(' + img('static/resource/images/member/commission/commission_bg.png') + ') ',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'bottom',
    }
})
//  16为自定头部的padding-bottom
const mescrollTop = computed(() => {
    return Object.keys(menuButtonInfo).length ? (Number(menuButtonInfo.height) * 2 + menuButtonInfo.top * 2 + 470 + 16) + 'rpx' : '470rpx'
})

//来源类型
const fromType = ref({
    from_type: '',
    account_data_gt: ''
})
const accountTypeList = ref([
    { name: '全部', from_type: '', account_data_gt: '' },
    { name: '佣金', from_type: '', account_data_gt: 0 },
    { name: '提现', from_type: 'cash_out', account_data_gt: '' },
])
const create_time = ref([])
const list = ref<Array<any>>([])
const loading = ref<boolean>(true)
const listLoading = ref<boolean>(true)
const mescrollRef = ref(null);

const fromTypeFn = (data: any, index: number) => {
    fromType.value.from_type = data.from_type
    fromType.value.account_data_gt = data.account_data_gt
    getMescroll().resetUpScroll();
}
const geCommissionListFn = (mescroll: any) => {
    listLoading.value = true;
    let data: Object = {
        page: mescroll.num,
        limit: mescroll.size,
        from_type: fromType.value.from_type,
        account_data_gt: fromType.value.account_data_gt,
        create_time: create_time.value
    }
    getCommissionList(data).then((res: any) => {
        let newArr = res.data.data;
        mescroll.endSuccess(newArr.length);
        //设置列表数据
        if (mescroll.num == 1) {
            list.value = []; //如果是第一页需手动制空列表
        }
        list.value = list.value.concat(newArr);
        listLoading.value = false;
        loading.value = false;
    }).catch(() => {
        listLoading.value = false;
        loading.value = false;
        mescroll.endErr(); // 请求失败, 结束加载
    })
}
//日期筛选
const selectDateRef = ref()
const handleSelect = () => {
    selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
    create_time.value = data;
    list.value = []
    getMescroll().resetUpScroll();
}
</script>

<style lang="scss">
.member-level {
    background: linear-gradient(360deg, #F23621 11%, #FF7F71 100%), #D9D9D9;
    border-radius: 0rpx 20rpx 20rpx 0rpx;
}

:deep(.uni-scroll-view) {
    overflow: auto hidden !important;
}

.body-bottom {
    padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
</style>
